<template>
  <el-col class="base-table">
    <el-row style="margin-bottom:20px">
      <el-col :span="24">
        <div class="block" style="float:left">
          <el-date-picker
            v-model="reachVal"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
        <div class="block">
          <el-button style="margin-left:20px;font-size:20px" type="primary" @click="handleReach(reachVal)" size="small" icon="el-icon-search" title="查询"></el-button>
          <!-- <el-button style="font-size:20px" type="primary" @click="handleUpload" size="small" icon="el-icon-upload" title="导出"></el-button>         -->
          <el-button style="font-size:20px" type="primary" @click="handlePrinte" size="small" icon="el-icon-printer" title="打印"></el-button>
        </div>
      </el-col>
    </el-row>
    <div id="allTable">
      <el-table ref="qyTable1" border :empty-text='empty' :data="tableData1" tooltip-effect="dark">
        <el-table-column prop="xianqu" label="县市区名" header-align="center"></el-table-column>
        <el-table-column prop="river" label="河流名称" header-align="center"></el-table-column>
        <el-table-column prop="stnm" label="站名" header-align="center"></el-table-column>
        <el-table-column label="水位" header-align="center">
          <template slot-scope="scope">
            <div :class="{'fontgreen':scope.row.wptn==4,'fontred':scope.row.wptn==5 }">{{formatterZ(scope.row)}}</div>
          </template>
        </el-table-column>
        <el-table-column label="水势" header-align="center">
          <template slot-scope="scope">
            <div :class="{'fontgreen':scope.row.wptn==4,'fontred':scope.row.wptn==5 }">{{formatter(scope.row)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="bzr" label="比昨日" header-align="center"></el-table-column>
        <el-table-column prop="wrz" label="预警水位" header-align="center"></el-table-column>
      </el-table>
    </div>
  </el-col>
</template>
<script>
export default {
  name: "shsqjb",
  data() {
    return {
      reachVal: "",
      tableData1: [],
      empty: "正在读取数据，请稍等"
    };
  },
  methods: {
    doforTime(val) {
      var today = new Date(val);
      var yearNum = today.getFullYear();
      var monNum =
        today.getMonth() + 1 > 9
          ? today.getMonth() + 1
          : "0" + (today.getMonth() + 1);
      var dayNum =
        today.getDate() > 9 ? today.getDate() : "0" + today.getDate();
      var hourNum =
        today.getHours() > 9 ? today.getHours() : "0" + today.getHours();
      var finDate =
        yearNum +
        "-" +
        monNum +
        "-" +
        (dayNum - 1) +
        " " +
        hourNum +
        ":" +
        "00" +
        ":" +
        "00";
      return finDate;
    },
    //点击查询
    handleReach(val) {
      console.log(val);
      var yestady = new Date(this.doforTime(val)).valueOf();
      // var reachData = [];
      // this.reachVal.forEach((val, index) => {
      //   reachData.push({
      //     time: val.valueOf()
      //   });
      // });
      console.log("今日" + val.valueOf() + ",昨日" + yestady);
      Promise.all([
        this.$$http("GET_HONG_RAIN", [val.valueOf()]),
        this.$$http("GET_HONG_RAIN", [yestady])
      ]).then(data => {
        console.log(data);
        if (data[0].length > 0) {
          this.doforTableDate(data);
        } else {
          this.$message({
            message: "当前时段暂无数据！",
            type: "warning"
          });
          this.empty = "当前时段暂无数据！";
        }
      });
    },
    //点击导出
    handleUpload() {},
    //点击打印
    handlePrinte() {
      var newstr = document.getElementById("allTable").innerHTML;
      var oldstr = document.body.innerHTML;
      document.body.innerHTML = newstr;
      window.print();
      document.body.innerHTML = oldstr;
      // 重新加载页面，以刷新数据
      window.location.reload();
    },
    //数据处理
    doforTableDate(val) {
      var data = val;
      console.log(data);
      var data1 = data[0]
        .filter(row => {
          return row && row.info.y == "1";
        })
        .sort(this.compare("x"));
      var data2 = data[1]
        .filter(row => {
          return row && row.info.y == "1";
        })
        .sort(this.compare("x"));
      console.log(data1, data2);
      this.tableData1 = data1.map((v, k, a) => {
        return {
          xianqu: v.info.xianqu,
          river: v.info.river,
          stnm: v.info.stnm,
          z: v.z ? Number(v.z).toFixed(2) : "",
          wptn: v.wptn,
          bzr: v.z && data2[k].z ? Number(v.z - data2[k].z).toFixed(2) : "",
          wrz: v.wrz ? Number(v.wrz).toFixed(2) : ""
        };
      });
      console.log(this.tableData1);
    },
    //排序
    compare(property) {
      return function(obj1, obj2) {
        var value1 = obj1.info[property];
        var value2 = obj2.info[property];
        return value1 - value2; // 升序
      };
    },
    formatter(row) {
      switch (row.wptn) {
        case "4":
          return "落";
          break;
        case "5":
          return "涨";
          break;
        case "6":
          return "平";
          break;
        default:
          break;
      }
    },
    formatterZ(row) {
      console.log(row.z);
      if (row.z == 10000.0) {
        return "--";
      } else {
        return row.z;
      }
    }
  },
  mounted() {
    var today = new Date();
    var yearNum = today.getFullYear();
    var monNum = today.getMonth();
    var dayNum = today.getDate();
    var hourNum = today.getHours();
    // console.log(hourNum);
    this.reachVal = new Date(yearNum, monNum, dayNum, "00");
    this.handleReach(this.reachVal);
  }
};
</script>
<style lang="scss">
.base-table {
  padding: 12px;
}
.fontgreen {
  color: green;
}
.fontred {
  color: red;
}
</style>